<script setup lang="ts">
import clone from "@/assets/close.png";
import JInput from "@/components/j-input/index.vue";
import i18n from "@/locals";
import { URL_BIND_EMAIL, URL_EMAIL_CODE } from "@/comm/api";
import { post } from "@/comm/request";
import { toast } from "@/components/toast/toast";
import { Notify } from "@/components/y-notify/script";
import { onMounted, ref,watch } from "vue";
import { useUser } from "@/stores/user";
import { isValidEmail } from "@/comm/format";
// import { user } from "@/views/user/script/user";
const user = useUser();
const errInfo = ref<string>('');
enum LoginType {
    Email = 0,
    Twitter = 1,
    Google,
}
onMounted(()=>{
    errInfo.value = '';
})
// console.log(LoginType['Google'],"TwitterTwitter");

const prop = defineProps({
    close: {
        type: Function,
        default: () => { }
    },
    email: {
        type: String,
        default: ""
    },
    show:{
        type:Boolean,
        default:false
    }
});
watch(() => prop.show, () => {
    if(prop.show){
        errInfo.value = '';
    }
});

type CallCode = {
    code: number,
    info: string
}

const emailD = {
    time: 60,
    timekey: Object(),
    // text: ref('获取验证码'),
    text: ref(i18n.global.t('message.RegisterVerify_.i')),
    email: ref(prop.email),
    disabled: ref(false),
    timeFun: function () {
        this.disabled.value = true;
        for (let i = 0; i <= this.time; i++) {
            this.timekey = setTimeout(() => {
                // this.text.value = `${this.time - i}${i18n.global.t('message.RegisterVerify_.j')}`;
                this.text.value = `${this.time - i} S`;
                // console.log('倒计时计算', this.time - i)
                if ((this.time - i) == 0) {
                    this.disabled.value = false;
                    this.text.value = i18n.global.t('message.RegisterVerify_.i');
                }
            }, i * 1000);
        }
    }
}

const code = ref();
const getE = function () {
    if(!emailD.email.value){
        errInfo.value = i18n.global.t('message.BindFacebook.d');
        return;
    }
    if (!isValidEmail(emailD.email.value)) {
        errInfo.value = i18n.global.t("message.Register.emailErr");
        return;
    }
    if (emailD.disabled.value == false) {
        emailD.timeFun();
        errInfo.value = '';
        post(URL_EMAIL_CODE, { msgId: 105, email: emailD.email.value }).then((res: any) => {
            const data: CallCode = res;
            if (data.code === 200) {
                Notify.alert(data.info);
            }else if (data.code === 500) {
                // console.error(data);
                Notify.alert(`${data.code}${data.info}`, 'warning',4000);
            }else{
                Notify.alert(`${data.info}`, 'warning',4000);
            }
        });
    }
};

const onBindEmail = () => {
    if (code.value !== undefined && String(code.value).length >= 6) {
        // thirdType: LoginType[user.device.loginType]
        post(URL_BIND_EMAIL, { email: emailD.email.value, dynamicCode: code.value, thirdType: 0 }, true)
            .then(async (res: any) => {
                console.log(res, typeof res);
                if (res.code == 200) {
                    const user = useUser();
                    user.getUserInfo();
                    Notify.alert(i18n.global.t("message.RegisterVerify.success"));
                    prop.close();
                } else {
                    Notify.alert(i18n.global.t(res.info), 'warning',4000);
                }
            }).catch((err: any) => {
                Notify.alert(i18n.global.t("message.RegisterVerify.error"), 'warning',4000);
            });
    } else {
        Notify.alert(i18n.global.t("message.RegisterVerify_.k"), 'warning',4000);
    }
};
</script>
<template>
    <Transition>
        <div class="verify">
            <div class="card">
                <img :src="clone" class="close" @click.stop="prop.close" />
                <!-- <h1 style="color: white">邮箱验证</h1> -->
                <h1 style="color: white">{{ $t('message.RegisterVerify_.a') }}</h1>
                <span class="my-5">{{ $t('message.RegisterVerify_.b') }}</span>
                <div class="ipt1">
                    <p class="mb-2">{{ $t('message.RegisterVerify_.c') }}</p>
                    <div class="ipt_ d-flex">
                        <JInput class="ipt-box" :placeholder="$t('message.RegisterVerify_.d')" :disabled="!true"
                            v-model="emailD.email.value" :err="errInfo"></JInput>
                        <div class="btn" :class="emailD.disabled.value ? 'disabled' : ''" @click="getE">{{
                            emailD.text.value }}</div>

                    </div>
                </div>
                <div class="ipt2 mt-8">
                    <p class="mb-2">{{ $t('message.RegisterVerify_.e') }}</p>
                    <JInput class="ipt-box" v-model="code" :placeholder="$t('message.RegisterVerify_.f')"></JInput>
                </div>
                <div class="btn mt-10">
                    <span @click="prop.close" class="bts">{{ $t('message.RegisterVerify_.g') }}</span>
                    <span @click="onBindEmail" class="bts">{{ $t('message.RegisterVerify_.h') }}</span>
                </div>
            </div>
        </div>
    </Transition>
</template>

<style scoped lang="less">
.v-enter-active,
.v-leave-active {
    transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
    opacity: 0;
}

.disabled {
    filter: grayscale(100%);
}

.verify {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;

    .card {
        position: relative;
        color: #b1b6c6;
        width: 488px;
        padding: 47px 30px;

        display: inline-flex;
        flex-direction: column;
        border-radius: 12px;
        background-color: var(--card);

        .ipt1 {
            .ipt_ {
                .j-input {
                    flex: 1;
                    margin-right: 5px;
                }

                .btn {
                    font-size: 12px;
                    flex: 0.5;
                    display: inline-flex;
                    justify-content: center;
                    align-items: center;
                    background-color: var(--main);
                    border-radius: 4px;
                    color: black;

                }
            }
        }

        .close {
            position: absolute;
            top: 30px;
            right: 34px;
            width: 20px;
            height: 20px;
        }

        .btn {
            display: flex;
            justify-content: space-between;
            gap: 27px;

            .bts {
                flex: 1;
                width: 0;
            }

            span:first-child {
                background-color: #7e7c7a;
            }

            span {
                display: inline-block;
                padding: 10px 19%;
                color: black;
                border-radius: 4px;
                background-color: var(--main);
                word-spacing: normal;

                &:hover {
                    filter: brightness(0.9);
                }

                &:active {
                    filter: brightness(1);
                }
            }
        }
    }
}
</style>
